<template>
  <v-container>
    <v-row style="margin: 12px" align="center" justify="center">
      <v-item-group v-model="activeBrand" multiple>
        <v-container>
          <v-row style="margin: 0" align="center" class="flex-scroll">
            <template v-for="(item, index) in brandList">
              <v-item v-slot="{ active, toggle }" :key="index" v-ripple="NaN">
                <v-card
                  class="sign"
                  :class="active ? 'active-brand' : ''"
                  :color="active ? 'grey lighten-1' : ''"
                  @click="searchCar(item, toggle)"
                >
                  <v-img
                    contain
                    class="sign-img"
                    width="117px"
                    height="87px"
                    :src="item.brand_logo"
                    :alt="item.brand_name"
                  />
                  <v-row justify="center" class="brand-name">
                    {{ item.brand_name }}
                  </v-row>
                </v-card>
              </v-item>
            </template>
          </v-row>
        </v-container>
      </v-item-group>
    </v-row>
  </v-container>
</template>

<script>
export default {
  name: 'SearchCar',
  props: {
    brandList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      activeBrand: []
    };
  },
  watch: {
    activeBrand(val) {
      const ids = val.map((item) => {
        return this.brandList[item].id;
      });
      this.$emit('change', ids);
    }
  },
  methods: {
    searchCar(item, toggle) {
      toggle();
    }
  }
};
</script>
<style scoped lang="scss">
.search {
  margin-bottom: 42px;
}
.search-title {
  width: 219px;
  height: 33px;
  margin-right: 63px;
  font-family: Poppins, Poppins;
  font-weight: 600;
  font-size: 24px;
  color: #3b3a40;
  line-height: 35px;
  text-align: center;
  font-style: normal;
}

.search-input {
  width: 555px;
  border-radius: 18px;
}

.search-btn {
  height: 23px;
  font-family: Poppins, Poppins;
  font-weight: 600;
  font-size: 16px;
  color: #ffffff;
  line-height: 25px;
  text-shadow: 0px 10px 30px rgba(0, 0, 0, 0.08);
  text-align: left;
  font-style: normal;
  text-transform: none;
}

.sign {
  width: 140px;
  height: 147px;
  background: #f1f2f3;
  border-radius: 20px;
  padding: 19px 15px 20px 15px;
  margin: 12px;
  &:focus:before {
    display: none !important;
  }
  &:before {
    display: none !important;
  }
}

.brand-name {
  margin-top: 6px;
  font-size: 10px;
  text-align: center;
}

@media screen and (max-width: 600px) {
  .search-input {
    width: 90vw !important;
  }
  .search-title {
    width: 100% !important;
    height: 33px;
    margin-left: 12px !important;
    margin-bottom: 12px;
    font-family: Poppins, Poppins;
    font-weight: 600;
    font-size: 24px;
    color: #3b3a40;
    line-height: 35px;
    text-align: left !important;
    font-style: normal;
  }
  // .flex-scroll {
  //   flex-wrap: nowrap;
  //   overflow: scroll;
  // }
  .sign {
    width: 75px !important;
    height: 75px !important;
    background: #f1f2f3 !important;
    border-radius: 11px !important;
    padding: 10px 8px;
    margin: 6px;
  }
  .sign-img {
    width: 67px !important;
    height: 30px !important;
  }
}
</style>
